<template>
  <div class="preview-image-root" v-show="isShow" @click="close">
    <img class="image" :src="imageSrc" alt="" width="100%">
  </div>
</template>
  
<script>
  export default {
    name: 'PreviewImage',

    data () {
      return {
        isShow: false,
        imageSrc: 'http://pic44.nipic.com/20140721/11624852_001107119409_2.jpg'
      }
    },

    computed: {},

    mounted () {},

    methods: {
      /*
       * 当前方法供外部调用
       */
      show (src) {
        this.imageSrc = src
        this.isShow = true
      },

      /*
       * 关闭图片预览
       */
      close () {
        this.isShow = false
        this.imageSrc = ''
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .preview-image-root
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    overflow auto
    background rgba(0,0,0,0.8)
    .image
      position absolute
      left 0
      top 50%
      transform translateY(-50%)
      width 100%
      height auto
</style>
